<template>
	<view class="con">
		<view class="notice">
			<view class="notice_nr">
				<image class="notice_nr_img" src="/static/70.png" mode=""></image>
				<view class="notice_nr_box">
					<view class="notice_nr_box_title">{{ detail.title }}</view>
					<view class="notice_nr_box_text">发布时间：{{ detail.time }}</view>
				</view>
			</view>
			<view class="notice_box">
				<rich-text :nodes="nodes_data(nodes)"></rich-text>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let id = ref(0)
	let detail = ref({})
	let nodes = ref('')
	const nodes_data = (value) => {
		let finalHtml = processRichText(value)
		return finalHtml
	}
	// 处理富文本中的图片样式
	const processRichText = (html) => {
		// 1. 移除原img标签中的style和内联宽高
		let processedHtml = html
			.replace(/<img([^>]*)style="[^"]*"/g, '<img$1') // 移除原有style
			.replace(/<img([^>]*)width="[^"]*"/g, '<img$1') // 移除width属性
			.replace(/<img([^>]*)height="[^"]*"/g, '<img$1') // 移除height属性

		// 2. 为所有img标签添加自适应样式
		processedHtml = processedHtml.replace(
			/<img([^>]*)>/g,
			'<img$1 style="max-width:100%; height:auto; display:block; margin:0 auto;">'
		)

		return processedHtml
	}

	const indexlist = async () => {
		await http.post('/srapi/yuangong/ggdetail', { id: id.value }).then((res) => {
			console.log('返回值', res)
			detail.value = res.data
			nodes.value = res.data.content
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
	})
</script>

<style lang="less" scoped>
	.con {
		padding: 30rpx;
	}
	.notice {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		.notice_nr {
			display: flex;
			align-items: flex-start;
			border-bottom: 1px solid #f4f5f9;
			.notice_nr_img {
				width: 29rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
			.notice_nr_box {
				.notice_nr_box_title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					margin-bottom: 16rpx;
					line-height: 22rpx;
				}
				.notice_nr_box_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
					margin-bottom: 30rpx;
				}
			}
		}

		.notice_box {
			padding-top: 30rpx;
		}
	}

	//
</style>
